<template>
  <el-dialog :title="options.title" :visible.sync="options.dialogVisible" :modal-append-to-body="false" :destroy-on-close="false"
    custom-class="body-wrapper" @close="closeUploadDialog" width="500px">
    <el-upload drag ref="uploadFile" :action="actionUrl(options.url)" :show-file-list="true" :auto-upload="false"
      :headers="headers" :data="formData" accept=".xls,.xlsx" :on-success="uploadSuccess" :on-exceed="handleExceed"
      :on-error="uploadError" :limit="options.limit">
      <i class="el-icon-upload"/>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">
        <el-alert :title="options.alertTitle" type="warning" show-icon>
        </el-alert>
      </div>
    </el-upload>
    <div v-if="options.backendVerify">
      <span style="color: #E6A23C;">后台校验？点击这里&nbsp;</span>
      <el-switch v-model="formData.force" active-color="#13ce66"
        inactive-color="#ff4949" active-value="1" inactive-value="0"></el-switch>
      <span style="color: #E6A23C;">&nbsp;强制提交</span>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="options.dialogVisible = false" size="medium">取 消</el-button>
      <el-button type="primary" @click="submitUpload" size="medium">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Prop, Vue, Ref } from 'vue-property-decorator';
import MenuTag from "@/components/MenuTag.vue";
import store from '@/store';
@Component({
  components: { MenuTag }
})
export default class FileUploadDialog extends Vue {
  @Prop() private options!:any;

  formData: any = {
    force: '0',
    workId: '',
    categoryId: '',
    structureId: ''
  }
  @Ref('uploadFile') uploadFile!: any;
  headers: any = {
    'Authorization': 'Bearer ' + store.getters.token
  };

  get actionUrl() {
    return function (url) {
      return process.env.VUE_APP_BASE_API + url;
    }
  }

  /*上传成功*/
  uploadSuccess(res) {
    this.options.dialogVisible = false;
    if (res.result) {//上传成功
      this.$emit('uploadSuccess',res);
      this.$message.success(`导入成功，${res.msg}`);
    } else {//上传失败
      this.$message.warning(`导入失败，${res.msg}`);
      this.uploadFile.clearFiles();
    }
  }



  closeUploadDialog() {

    this.options.dialogVisible = false;
    this.$nextTick(() => {
      this.uploadFile.clearFiles();
    });
  }


  handleExceed(files, fileList) {
    this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
  }

  /*上传*/
  submitUpload() {
   
    this.formData.structureId = this.options.structureId;
    this.formData.categoryId = this.options.categoryId;
    this.formData.workId = this.options.workId;
    this.uploadFile.submit();

  }

  /*文件上传失败*/
  uploadError(res) {
    const result = JSON.parse(res.message);
    this.$message.error(`导入失败，${result.msg}`);
  }

}
</script>
<style lang="scss" scoped>
.header-title {
  width: fit-content;
  text-align: center;
  color: #ffffff;
  font-family: sans - serif;
  font-size: 30px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>
